<h3 mat-dialog-title>
  交易对（{{pair.id ? '修改' : '新建'}}）
</h3>

<mat-dialog-content>
  <form [formGroup]="form" novalidate>

    <ng-template [ngIf]="pair.id">
      <div class="read-only-field">
        <mat-label>基础币种</mat-label>
        <img class="ccy-logo" [src]="CoinLogoPath(pair.baseCcy)" alt=""> &nbsp;
        {{pair.baseCcy}}
      </div>
      <div class="read-only-field">
        <mat-label>报价币种</mat-label>
        <img class="ccy-logo" [src]="CoinLogoPath(pair.quoteCcy)" alt=""> &nbsp;
        {{pair.quoteCcy}}
      </div>
    </ng-template>

    <ng-template [ngIf]="!pair.id">
      <mat-form-field class="full-width">
        <mat-label>基础币种</mat-label>
        <mat-select formControlName="baseCcy">
          <mat-option *ngFor="let ccy of $ccys | async" [value]="ccy.code">
            <img class="ccy-logo" [src]="CoinLogoPath(ccy.code)" alt=""> &nbsp;
            {{ccy.code}} &nbsp; {{ccy.nameZh}}
          </mat-option>
        </mat-select>
      </mat-form-field>

      <mat-form-field class="full-width">
        <mat-label>报价币种</mat-label>
        <mat-select formControlName="quoteCcy">
          <mat-option *ngFor="let ccy of $ccys | async" [value]="ccy.code">
            <img class="ccy-logo" [src]="CoinLogoPath(ccy.code)" alt=""> &nbsp;
            {{ccy.code}} &nbsp; {{ccy.nameZh}}
          </mat-option>
        </mat-select>
      </mat-form-field>
    </ng-template>

    <mat-form-field class="full-width">
      <input matInput placeholder="OE Symbol" formControlName="oeSymbol">
    </mat-form-field>

    <mat-form-field class="full-width">
      <input matInput placeholder="BA Symbol" formControlName="baSymbol">
    </mat-form-field>

    <mat-form-field class="full-width">
      <input matInput placeholder="HB Symbol" formControlName="hbSymbol">
    </mat-form-field>

    <div class="slide-field full-width">
      <mat-slide-toggle formControlName="concerned">关注</mat-slide-toggle>
    </div>

  </form>
</mat-dialog-content>

<div mat-dialog-actions align="end">
  <button mat-button mat-dialog-close>取消</button>
  <button mat-button color="primary" cdkFocusInitial (click)="save()">保存</button>
</div>
